<template>
  <div
    style="
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      background: white;
      width: 70%;
    "
  >
    <el-tag type="success" class="medium"><h1>试题详情</h1></el-tag>
    <div style="margin-left: 40px; margin-bottom: 20px; margin-top: 20px">
      <span style="color: blue; margin-bottom: 15px" v-if="question.type == 1"
        >【选择题】&nbsp;</span
      >
      <span style="color: blue; margin-bottom: 15px" v-if="question.type == 2"
        >【多选题】&nbsp;</span
      >
      <span style="color: blue; margin-bottom: 15px" v-if="question.type == 3"
        >【判断题】&nbsp;</span
      >
      <span style="color: blue; margin-bottom: 15px" v-if="question.type == 4"
        >【填空题】&nbsp;</span
      >
      <span style="color: blue; margin-bottom: 15px" v-if="question.type == 5"
        >【问答题】&nbsp;</span
      >
      {{ question.content }}
      <div v-if="question.type == 1||question.type == 2">
        <div v-for="(val, key, index) in this.options" :key="index">
          <el-row style="margin-top: 15px; margin-left: 15px"
            >{{ key }}.{{ val }}</el-row
          >
        </div>
      </div>
      <el-row style="margin-top: 15px; margin-left: 15px">
        <span>[答案]&nbsp;&nbsp;&nbsp;</span
        ><font color="greenyellow">{{ question.answer1.answer }}</font>&nbsp;&nbsp;&nbsp;
        <span  v-if="question.level==1">[难度]&nbsp;&nbsp;&nbsp;<font color="greenyellow">简单</font>&nbsp;&nbsp;&nbsp;</span>
        <span  v-if="question.level==2">[难度]&nbsp;&nbsp;&nbsp;<font color="greenyellow">中等</font>&nbsp;&nbsp;&nbsp;</span>
        <span  v-if="question.level==3">[难度]&nbsp;&nbsp;&nbsp;<font color="greenyellow">困难</font>&nbsp;&nbsp;&nbsp;</span>
        <span >[所属题库]&nbsp;&nbsp;&nbsp;</span
        ><font color="greenyellow">{{ question.pool.poolName }}</font>&nbsp;&nbsp;&nbsp;
        <div style=" margin-top: 20px">
          [解析]&nbsp;&nbsp;&nbsp;<font color="greenyellow">{{
            question.answer1.detail
          }}</font>&nbsp;&nbsp;&nbsp;
        </div>
      </el-row>
    </div>
    <el-tag type="success" class="medium"><h1>最新题目</h1></el-tag>
    <div style="margin: 15px 40px">
      <el-table
        :data="issues"
        :span-method="arraySpanMethod"
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="content" label="题目内容" align="center" :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column  label="题目类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">单选</span>
            <span v-else-if="scope.row.type == 2">多选</span>
            <span v-else-if="scope.row.type == 3">判断</span>
            <span v-else-if="scope.row.type == 4">填空</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column  label="题目难度" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.level == 1">简单</span>
              <span v-else-if="scope.row.level == 2">中等</span>
              <span v-else-if="scope.row.level == 3">困难</span>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" align="center">
        </el-table-column>
      </el-table>
    </div>
    <el-tag type="success" class="medium"><h1>蜗牛学苑</h1></el-tag>
    <div style="margin: 20px 30px">
      <el-carousel :interval="1500" type="card" height="300px">
        <el-carousel-item v-for="path in imgPath" :key="path">
          <el-image :src="path"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      question: {},
      options: {},
      issues: [],
      imgPath: [
        "https://woniuxy.com/page/image/courseIcon/major4/course207.jpg",
        "https://woniuxy.com/page/image/courseIcon/liveIcon/181.jpg",
        "https://woniuxy.com/page/image/courseIcon/liveIcon/206.jpg",
      ],
    };
  },
  created() {
    if (this.$route.query.id) {
      this.$axios
        .post(
          "http://localhost:8080/issue/findIssueById/" + this.$route.query.id
        )
        .then((res) => {
          console.log(res.data.data);
          this.question = res.data.data;
          this.options = eval("(" + res.data.data.answer1.options + ")");
        });
    }
    //最新题目查询
    this.$axios.post("http://localhost:8080/issue/findNew/").then((res) => {
      this.issues = res.data.data;
    });
  },
};
</script>

